<style>
    input.ng-dirty.ng-invalid { border: 2px solid #ff0000 }
    input.ng-dirty.ng-valid { border: 2px solid #6bc502 }
  </style>
  
  <div class="row m-2">
    <div class="col-6">
      <form class="m-2" novalidate (ngSubmit)="submitForm()">
        <div class="form-group">
            <label>Name</label>
            <input class="form-control" name="name" [(ngModel)]="newProduct.name" />
        </div>
        <div class="form-group">
          <label>Category</label>
          <input class="form-control" name="category" 
              [(ngModel)]="newProduct.category" />
        </div>      
        <div class="form-group">
          <label>Price</label>
          <input class="form-control" name="price" [(ngModel)]="newProduct.price" />
        </div>      
        <button class="btn btn-primary" type="submit">Create</button>
      </form>
    </div>
  
    <div class="col-6">
      <table class="table table-sm table-bordered table-striped">
        <tr><th></th><th>Name</th><th>Category</th><th>Price</th></tr>
        <tr *ngFor="let item of getProducts(); let i = index">
          <td>{{i + 1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.category}}</td>
          <td>{{item.price}}</td>
        </tr>
      </table>
    </div>
  </div>
  